<div class="panel-app">
  <table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort>
    <ng-container
      matColumnDef="{{column}}"
      *ngFor="let column of displayedColumns"
    >
      <th
        mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        [ngStyle]="{ width: '140px' }"
      >
        {{ column }}
      </th>

      <td mat-cell *matCellDef="let item" [ngStyle]="{ width: '140px' }">
        {{
          column === "time"
            ? (item.time
              | timeAgo: { ago: item.ago, now: item.now, locale: locale })
            : item[column]
        }}
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let item; columns: displayedColumns"></tr>
  </table>

  <mat-paginator
    [pageSizeOptions]="[5, 10, 20]"
    showFirstLastButtons
  ></mat-paginator>
</div>
